import styled from '@emotion/styled';
import { Button, Checkbox, Form, Input } from 'antd';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import AgentService from '../../../public/widget';
import { useTranslation } from 'react-i18next';

const Login = () => {
	const [loginData, setLoginData] = useState<{ username: string; password: string; org: string; remember: boolean }>({ username: '', password: '', org: '', remember: true });
	const { t } = useTranslation();
	const nav = useNavigate();
	useEffect(() => {
		if (localStorage.getItem('mindray_user_name') && localStorage.getItem('mindray_agent_pwd') && localStorage.getItem('mindray_agent_org')) {
			setLoginData({
				username: localStorage.getItem('mindray_user_name')!,
				password: localStorage.getItem('mindray_agent_pwd')!,
				org: localStorage.getItem('mindray_agent_org')!,
				remember: true
			});
		}

		console.log(loginData);
	}, []);
	const onFinish = async (values: any) => {
		console.log('Success:', values);
		const { username, password, org, remember } = values;
		AgentService.Agent.setLoginData({ username, password, org });

		try {
			const data = await AgentService.Agent.loginSystem();
			if (data) {
				if (remember) {
					localStorage.setItem(`mindray_user_name`, username);
					localStorage.setItem(`mindray_agent_pwd`, password);
					localStorage.setItem(`mindray_agent_org`, org);
				}

				sessionStorage.setItem('isLogin', "true")

				nav('/', { replace: false });
			}
		} catch (error) {
			console.log(error);
		}
	};

	const onFinishFailed = () => {};

	const LoginContainer = styled.div`
		position: absolute;
		width: 600px;
		height: 400px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid #eee;
		padding: 20px;
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
	`;

	const LoginHeader = styled.h2`
		text-align: center;
		font-weight: 700;
		padding: 10px 0;
	`;

	const LoginWrapper = styled.div`
		width: 100%;
		height: 100%;
		background-color: #252b48;
	`;

	return (
		<LoginWrapper>
			<LoginContainer>
				<LoginHeader>{t('mindray-engineer-system')}</LoginHeader>
				<Form name="basic" labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} initialValues={loginData} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off">
					<Form.Item label={t('user-name')} name="username" rules={[{ required: true, message: t('user-name-invalid') as string }]}>
						<Input onPressEnter={e => e.preventDefault()} />
					</Form.Item>

					<Form.Item label={t('password')} name="password" rules={[{ required: true, message: t('password-invalid') as string }]}>
						<Input.Password onPressEnter={e => e.preventDefault()} />
					</Form.Item>

					<Form.Item label={t('org')} name="org" rules={[{ required: true, message: t('org-invalid') as string }]}>
						<Input onPressEnter={e => e.preventDefault()} />
					</Form.Item>

					<Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 4, span: 16 }}>
						<Checkbox>{t('remeber-password')}</Checkbox>
					</Form.Item>

					<Form.Item wrapperCol={{ offset: 7 }}>
						<Button type="primary" htmlType="submit" style={{ width: '240px' }}>
							{t('login')}
						</Button>
					</Form.Item>
				</Form>
			</LoginContainer>
		</LoginWrapper>
	);
};

export default Login;
